<template>

  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center"><h3>购物街</h3></div>
    </nav-bar>
    <tab-control :titles="titles"
                 @tabClick="tabClick"
                 ref="tabControl1"
                 class="tab-control"
                 v-show="isTabFixed"></tab-control>
    <!--BScroll使用-->
    <scroll class="move-content" ref="scroll" :probe-type="3" @scroll="isShowBackClick" :pull-up-load="true"
            @pullingUp="loadMore">
      <home-swiper :banners="banners" class="home-swiper" @swiperImageLoad="swiperImageLoad"></home-swiper>
      <recommend-view :recommends="recommends"></recommend-view>
      <feature-view></feature-view>
      <tab-control :titles="titles"
                   @tabClick="tabClick"
                   ref="tabControl2"></tab-control>
      <goods-list :goods="showGoods" ref="goodsList"></goods-list>
    </scroll>
    <!--监听原生点击事件 -->
    <back-top @click.native="backClick" v-show="isShow"></back-top>
  </div>

</template>

<script>
  import HomeSwiper from "./childComponents/HomeSwiper"
  import RecommendView from "./childComponents/RecommendView"
  import FeatureView from "./childComponents/FeatureView"

  import NavBar from "components/common/navbar/NavBar";
  import Scroll from "components/common/scroll/Scroll"
  import tabControl from "components/content/tabControl/tabControl";
  import GoodsList from "components/content/goods/GoodsList";
  import BackTop from "components/content/backTop/BackTop.vue"

  import {getHomeMultidata, getHomeGoods} from "network/home";
  import {debounce} from "common/util";
  import axios from "axios";

  export default {
    name: "Home",
    components: {
      NavBar,
      HomeSwiper,
      RecommendView,
      FeatureView,
      tabControl,
      GoodsList,
      Scroll,
      BackTop
    },
    data() {
      return {
        banners: [],
        dKeyword: [],
        keywords: [],
        recommends: [],
        titles: [
          "流行", "新款", "精选",
        ],
        goods: {
          'pop': {page: 0, list: []},
          'new': {page: 0, list: []},
          'sell': {page: 0, list: []}
        },
        currentType: "pop",
        isShow: false,
        tabOffsetTop: 0,
        isTabFixed: false,
        saveY: 0
      }
    },
    computed: {
      showGoods() {
        return this.goods[this.currentType].list
      }
    },
    created() {
      //1.请求多个数据
      //在组件创建完成后，赶紧发送网络请求
      this.getHomeMultidata();
      //2.请求商品数据
      this.getHomeGoods('pop');
      this.getHomeGoods('new');
      this.getHomeGoods('sell');

      axios({
        url: "/home/multidata",
        method: 'get',
        //params: {}
      }).then(res => {
        console.log(res);
      })
    },
    mounted() {
      //3.监听图片中加载完成事件监听
      const refresh = debounce(this.$refs.scroll.refresh, 200);
      this.$bus.$on("itemImageLoad", () => {
        /*
        * 防抖和节流操作
        * 1.debounce防抖操作
        * 2.throttle节流操作
        * */
        refresh()
      });
      //4.获取tabControl的offsetTop
      //所有的组件都有一个属性，$el用来获取组件的元素

      //console.log(this.$refs.tabControl.$el.offsetTop);


      //this.tabOffsetTop = this.$refs.tabControl
    },
    destroyed() {
      //路由跳转会销毁，解决：keep-alive
      console.log("destroyed");
    },
    activated() {//活跃时
      // console.log(this.saveY);
      this.$refs.scroll.scroll.scrollTo(0, this.saveY, 500);
      this.$refs.scroll.refresh();
    },
    deactivated() {//离开时
      this.saveY = this.$refs.scroll.scroll.y;
    },
    methods: {
      /*
      * 防抖操作
      * */

      /*
     *事件监听相关方法
     * */
      tabClick(index) {
        console.log(index);
        switch (index) {
          case 0:
            this.currentType = "pop";
            break;
          case 1:
            this.currentType = "new";
            break;
          case 2:
            this.currentType = "sell";
            break;
        }
        this.$refs.tabControl1.currentIndex = index;
        this.$refs.tabControl2.currentIndex = index;
      },
      backClick() {
        //直接下面写法可以取到scroll里面的数据
        //console.log(this.$refs.scroll.msg);
        this.$refs.scroll.scroll.scrollTo(0, 0, 1000)
        //this.$refs.Scroll.scrollTo(0, 0)
      },
      isShowBackClick(position) {
        //1.判断backTop是否显示
        this.isShow = (-position.y) > 1000;

        //2.判断tabControl是否吸顶:position:fixed
        this.isTabFixed = (-position.y) > this.tabOffsetTop;
      },
      loadMore() {
        console.log("上拉加载更多");
        this.getHomeGoods(this.currentType)
      },
      swiperImageLoad() {
        //console.log(this.$refs.tabControl2.$el.offsetTop);
        this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
      },
      /*
      * 网络请求相关的方法
      * */
      getHomeMultidata() {
        getHomeMultidata().then(res => {
          console.log(res);
          this.$nextTick(() => {
            this.banners = res.data.banner.list;
            this.recommends = res.data.recommend.list;
          })
        })
      },
      getHomeGoods(type) {
        const page = this.goods[type].page + 1;
        getHomeGoods(type, page).then(res => {
          //console.log(res);
          //将res.data.list用es6的语法塞到list里
          this.goods[type].list.push(...res.data.list);
          this.goods[type].page += 1;

          // this.$refs.scroll.scroll.finishPullUp()
          this.$refs.scroll.finishPullUp()
          /*
          * 数据加载完成后需要掉用哪个此方法，才能加载更多
          * */

        })
      },
      /*this.axios.get('/home/multidata').then(res => {
        console.log(res);
      }),*/
    },
  }
</script>


<style scoped>
  #home {
    padding-top: 44px;
    /*
    vh:viewport height
    */
    height: 100vh;
    /* height: 100%;*//* height: 100%;*/
  }

  .home-nav {
    /*设置背景颜色*/
    background-color: var(--color-tint);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
  }

  /*.tab-control {
    position: sticky;
    top: 44px;
  }*/
  .tab-control {
    position: relative;
    z-index: 9;
  }

  .move-content {
  //height: 400px; //background-color: #f00; overflow: hidden;
    /*overflow-y: scroll;*/
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0
  }

  /* .move-content {
     height: calc(100% - 93px);
     background-color: #f00;
     !*padding-top: 44px;*!
     !*margin-top: 44px;  *!
     overflow: hidden;
   }*/

  /* .fixed {
     position: fixed;
     top: 44px;
     right: 0;
     left: 0
   }*/
</style>
